
<template>

<el-form  ref="zhuceform"   :rules="rules"   :label-position="labelPosition" label-width="80px" :model="users">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="users.name" style="width:300px"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="users.password" style="width:300px" type="password" ></el-input>
  </el-form-item>
  <el-form-item label="手机号"  prop="phone">
    <el-input v-model="users.phone" style="width:300px"></el-input>
  </el-form-item>
    <el-form-item label="兴趣" prop="intrest">
    <el-input v-model="users.intrest" style="width:300px"></el-input>
  </el-form-item>
    <el-form-item>
        <el-button type="primary"  @click="registered">注册</el-button>
        <el-button type="primary"  @click="cancel">取消</el-button>
    </el-form-item>
</el-form>
</template>
<script>
  export default {
    name:'zhuce',
    data() {
      return {
        labelPosition: 'right',
        users: {
          name: '',
          password:'',
          phone:'',
         intrest:'',
        },
        name:"",
        password:"",
        phone:"",
        intrest:"",

        rules: {
            name: [
                {required: true, message: '用户名不能为空', trigger: 'blur'}
            ],
            password: [
                {required: true, message: '密码不能为空', trigger: 'blur'}
            ],
            phone: [
              {required: true, message: '手机号不能为空', trigger: 'blur',},
              { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" }
            ],
            intrest: [
                {required: true, message: '兴趣不能为空', trigger: 'blur'}
            ],

        }

      }
    },
    methods:{
        cancel(){
            this.$router.push("/")
        },
        async registered(){
            const res=await this.$http.post("/users/create",this.users);
            console.log(res.status);
            
           
            if(res.status!==200){
                this.$message({showClose: true,message:'注册失败' ,type:'error'});
            }else{
                this.$message({showClose: true,message:'注册成功，可以登录', type:'success'});
                this.$router.push("/");
            }
        }
    }
  }
</script>
<style >

</style>